<template>
	<m-layout barBg="unset" gap="0 24" :scrollTop="scrollTop" title="区/县合伙人公司" color="#ffffff" scrollColor="#786BFF">
		<!-- 招募进度 -->
		<m-block class="mainBox flex-1 flex-column" bgColor="unset" style="position: relative;overflow: inherit;">
			<m-block bgColor="unset" class="flex-1" spa="350 0 30" style="overflow: inherit;">
				<m-block class="flex-1" bgColor="unset" style="overflow: inherit;">
					<view class="bgBox"></view>
					<!-- 创业合伙人权益 -->
					<m-block class="process" spa="30 0 30" style="overflow: inherit;">
						<view class="topBg">

						</view>
						<m-block gap="20 0 0" radius="40 0 0 0" style="position: relative;top:-20px;overflow: inherit;">
							<view class="process_title">
								<!-- <text>分公司合伙人能够获得如下权益：</text> -->
							</view>
							<view class="process_cont p-36 flex-column">
								<view class="flex-between mb-24 ai-baseline" v-for="(item,index) in priceList "
									:key="index">
									<text class="title fs24" style="position: relative;top:4px;">0{{item.idx}}</text>
									<text class="flex-1 ml-16 fs24 fw-600" style="color:#666">{{item.title}}</text>
								</view>
							</view>
							<view class="ta-center" @click="Jump('/pages/home/copartner/copartnerEquity')">
								<text class="fs26 text-primary">查看更多权益></text>
							</view>
						</m-block>
						<m-block bgColor="unset" gap="10 30 0">
							<template v-if="hhrNum!=total">
								<!-- <m-button class="mb-48 joined">即将上线</m-button> -->
								<m-button @click="$refs.popup.open()" class="mb-48 btnBox" v-if="!userinfo.hhr"
									style="border:unset"></m-button>
								<m-button class="mb-48 joined" v-else>已成为合伙人</m-button>
							</template>
							<template v-else>
								<m-button class="mb-48 joined">已招募完成</m-button>
							</template>
						</m-block>
					</m-block>
				</m-block>
			</m-block>
		</m-block>
		<!-- 成为合伙人弹框 -->
		<uni-popup ref="popup" type="bottom">
			<m-block class="popup-pay" gap="240 24 30" radius="20 20 0 0">
				<m-block class="flex-column ai-center">
					<text>确认支付</text>
					<m-price :value="getConfig(503)" class="mtb-12" :size="[60,30]"></m-price>
					<view class="text-primary">
						<text>个人账户余额：{{myBalance}}</text>
					</view>
					<view v-if="myBalance<Number(getConfig(503))" class="text-red fs21 mt-16"
						@click="Jump('/pages/wallet/recharge/recharge')">
						<text>余额不足，前往充值></text>
					</view>
				</m-block>
				<m-block gap="60 0 0">
					<text class="fs21 ml-20 text-red">收货地址(该地址将会作为礼包收货地址)</text>
					<m-address></m-address>
				</m-block>
				<m-block class="flex-column" gap="30 0 60" spa="0" radius="100">
					<!-- <m-fromItem class="flex-1" type="text" icon="icon-codebianma" gap="24 24" bgColor="#F6F6F6"
						iconColor="#999999" placeholder="请输入邀请码(个人或分公司)" v-model="invcode">
					</m-fromItem> -->
					<m-fromItem class="flex-1" v-if="Number(userinfo.paypassword)" border="0" type="password"
						icon="icon-mima" gap="24 24" bgColor="#F6F6F6" iconColor="#999999" placeholder="请输入密码"
						v-model="paypassword" />
					<view class="flex-1 flex jc-center" v-else
						@click="Jump('/pages/mine/setAccount/security/editorPay/editorPay?type=1')">
						<text class="pr-16 fs26">未设置支付密码</text>
						<text style="color:red;">前往设置>> </text>
					</view>
				</m-block>

				<!-- 提交按钮 -->
				<m-block class="flex-between">
					<m-button class="flex-1 mr-24" @click="$refs.popup.close()" type="hollow">取消</m-button>
					<m-button class="flex-1" :loading="loading" @click="goPay">确认</m-button>
				</m-block>
			</m-block>
		</uni-popup>
	</m-layout>
</template>

<script>
	import { hhrTotalCount, hhrApply } from "@/api/Payment.js"
	import { mapState, mapActions } from 'vuex';
	export default {
		name: '',
		data() {
			return {
				hhrNum: 0, // 已有 合伙人
				loading: false,
				scrollTop: 0,
				invcode: '',
				paypassword: '',
				phone: '',
				address: '',
				truename:'',
				priceList: [{
						title: '获得刺梨工坊超值大礼包一份',
						idx: 1
					},
					{
						title: '获得“搜鹭合伙人”平台所有已上架产品的”代理价“购买的资格',
						idx: 2
					},
					{
						title: '获得区县合伙人公司经营分红权',
						idx: 3
					}, {
						title: '获得成为区县合伙人公司“发起人”的资格并享有相关权益',
						idx: 4
					}, {
						title: '获得推荐“搜鹭合伙人”平台单品代理商的资格，同时获得推荐奖励',
						idx: 5
					},
					{
						title: '获得区/县合伙人公司绩效考核分红奖励',
						idx: 6
					},
				],
			};
		},
		computed: {
			...mapState({
				userinfo: state => state.user.userinfo,
				userbalance: state => state.user.userbalance,
				nowId: state => state.address.nowId,
				addressObj: state => state.address.addressObj,
			}),
			total() {
				return this.getConfig(504)
			},
			myBalance() {
				let c = 0;
				for (let var1 in this.userbalance) {
					console.log('var1', var1)
					c = this.userbalance[1].balance - this.userbalance[1].lockbalance;
				}
				return c;
			}
		},
		watch: {

		},
		onPageScroll({ scrollTop }) {
			this.scrollTop = scrollTop;
		},
		onShow() {
			this.init()
		},
		methods: {
			// 初始 数据
			async init() {
				this.paypassword = '';
				// const { success, data, msg } = await hhrTotalCount();
				// this.hhrNum = data;
			},
			// 成为合伙人
			async goPay() {
				this.truename = this.nowId ? this.addressObj[this.nowId].username : '';
				this.phone = this.nowId ? this.addressObj[this.nowId].userphone : '';
				this.address = this.nowId ? this.addressObj[this.nowId]['are'] + ' ' + this.addressObj[this.nowId][
					'useraddress'
				] : '';
				try {
					// if (this.total == this.hhrNum) return this.Toast('已暂无名额')
					if (!this.paypassword) return this.Toast('请输入密码')
					if (!this.nowId) return this.Toast('请选择收货地址')
					// if (!this.invcode) return this.Toast('请输入分公司邀请码')
					this.loading = true;
					const { success, msg, data } = await hhrApply({
						truename:this.truename,
						phone: this.phone,
						addr: this.address,
						invcode: this.invcode,
						paypassword: this.paypassword
					})
					this.Toast(msg)
					if (success) {
						this.$refs.popup.close();
						this.init()
					}
					this.loading = false
				} catch (e) {
					console.log(e)
				}
			}
		}
	};
</script>

<style lang="scss">
	page {
		height: 100%;
		background: url('../../../static/images/pages/home/parterTop.png') no-repeat;
		background-size: 100% 557rpx;
		background-color: #786BFF;
	}

	.process {
		background: linear-gradient(180deg, #FFFFFF 0%, #FFFFFF 100%) !important;

		.process_title {
			// display: inline-block;
			// background: linear-gradient(331deg, #18C03B 0%, #C2D356 100%);
			// border-radius: 0px 0px 20px 0px;
			// opacity: 1;
			// font-size: 28rpx;
			// color: #fff;
			background-image: url('../../../static/images/pages/home/parterTitle.png') !important;
			background-size: 100% 100%;
			width: 537rpx;
			height: 108rpx;
			position: relative;
			top: 30rpx;
			left: -20rpx;
		}

		.process_cont {
			.title {
				background: #18C03B;
				border-radius: 4px 4px 4px 4px;
				padding: 8rpx;
				color: #fff;
			}
		}
	}

	.popup-pay {
		background-image: url('../../../static/images/pages/home/payneed.png') !important;
		background-repeat: no-repeat !important;
		background-size: 100%, 100% !important;
		background-color: #fff !important;
	}

	.bgBox {
		position: absolute;
		height: 1000rpx;
		width: 100%;
		border-radius: 12rpx;
		background-color: #645bbb;
		bottom: -20rpx;
		right: -14rpx;
	}

	.topBg {
		width: 702rpx;
		height: 150rpx;
		background-image: url('../../../static/images/pages/home/parterPrice.png') !important;
		background-size: 100% 100%;
	}

	.btnBox {
		height: 122rpx;
		background: url('../../../static/images/pages/home/parterBtn.png')  !important;
		background-repeat: no-repeat !important;
		background-size: 100% 100% !important;
	}
</style>